<!-- 准考证号 -->
<template>
  <div class="titcket">
    <table cellspacing="0" cellpadding="0">
      <tr>
        <th class="title" colspan="5">{{ ticketDataCopy.applyType }}从业资格考核</th>
      </tr>
      <tr>
        <th class="title" colspan="4">准考证</th>
        <td rowspan="9">
          <img v-if="ticketDataCopy.headImg" class="head" :src="getImage(ticketDataCopy.headImg)" />
          <div
            :id="'admissionTicketCardQRcode' + ticketDataCopy.studentCode"
            class="admissionTicketCardQRcode"
          ></div>
        </td>
      </tr>
      <tr>
        <th>姓名</th>
        <td>{{ ticketDataCopy.name }}</td>
        <th>身份证号</th>
        <td>{{ ticketDataCopy.cardNo }}</td>
      </tr>
      <tr>
        <th>准考证号</th>
        <td colspan="3">
          {{ ticketDataCopy.studentCode }}
        </td>
      </tr>
      <tr>
        <th>考场名称</th>
        <td colspan="3">
          {{ ticketDataCopy.examAddressName }}
        </td>
      </tr>
      <tr>
        <th>考场地点</th>
        <td colspan="3">
          {{ ticketDataCopy.examAddress }}
        </td>
      </tr>
      <tr>
        <th>报考类别</th>
        <td>{{ ticketDataCopy.applyType }}</td>
        <th>考试科目</th>
        <td>
          {{ ticketDataCopy.examSubject }}
        </td>
      </tr>
      <tr>
        <th>考试开始时间</th>
        <td colspan="3">{{ ticketDataCopy.startDate }}</td>
      </tr>
      <tr>
        <th>考试结束时间</th>
        <td colspan="3">{{ ticketDataCopy.endDate }}</td>
      </tr>
      <tr>
        <th>理论考试次数</th>
        <td colspan="3">
          {{ ticketDataCopy.theoryExamCount }}
        </td>
      </tr>
      <tr v-if="ticketDataCopy.examDocketNotice">
        <th>考试须知</th>
        <td colspan="4">
          <div class="textinfo" v-html="ticketDataCopy.examDocketNotice"></div>
        </td>
      </tr>
      <tr v-if="ticketDataCopy.examDocketRemark">
        <th>准考证备注</th>
        <td colspan="4">
          <div class="textinfo" v-html="ticketDataCopy.examDocketRemark"></div>
        </td>
      </tr>
    </table>
    <br />
    <br />
  </div>
</template>

<script>
import { defineComponent, reactive, watch, toRefs  } from "vue-demi"
import { createQRCode } from '../../utils/qrcode.ts'
import { getImage } from '../../utils/common'

export default defineComponent({
  name: 'admissionTicket',
  props: {
    childData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup: function(prop) {
    const data = reactive({ 
      ticketDataCopy: {} 
    })
    const handleCreateQRcode = () => {
      createQRCode({
        domID: `admissionTicketCardQRcode${data.ticketDataCopy.studentCode}`,
        text: `编号:${data.ticketDataCopy.studentCode};\r\n姓名:${data.ticketDataCopy.name};\r\n身份证号:${data.ticketDataCopy.cardNo};\r\n申请类别：${data.ticketDataCopy.applyType}`,
        width: '100px',
        height: '100px'
      })
    }
    watch(() => prop.childData, (newVal) => {
      if (newVal && Object.keys(newVal).length) {
        data.ticketDataCopy = { ...newVal } 
        handleCreateQRcode()
      }
    }, {
      deep: true,
      immediate: true
    })

    return {
      ...toRefs(data),
      getImage
    }
  }
})
</script>

<style scoped lang="scss">
.titcket {
  font-size: 16px;
  margin: 20px auto 0;
  .text-center {
    text-align: center;
  }
  .font-bold {
    font-weight: bold;
  }
  .title {
    @extend .text-center;
    @extend .font-bold;
    font-size: 25px;
    padding: 10px 0;
  }
  table {
    width: 800px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    td, th {
      text-align: center;
      padding: 5px;
      min-width: 100px;
      border-bottom: 1px solid gray;
      border-right: 1px solid gray;
    }
  }
  .textinfo {
    text-align: justify;
    :deep(p) {
      padding: 0;
      margin: 0;
    }
  }
  .head {
    width: 100px; 
    height: 120px;
    margin: 0 auto;
  }
  .admissionTicketCardQRcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    canvas {
      height: 100px !important;
      width: 100px !important;
    }
  }
}
</style>
